<script lang="ts" setup>
import { reactive, ref, computed, provide } from 'vue'
import ComponentList from './components/ComponentList.vue'
import PreviewList from './components/PreviewList.vue'
import Config from './components/Config.vue'
import { IComponentItem, IComponentItemMap } from './interface/IComponentItem'

// const componentDataMap = reactive<IComponentItemMap>({})
interface IChildTabCompMap {
    [key:string]: IComponentItem[]
}

const testName = ref<string>('zhen')
const componentData: IComponentItem[] = reactive([])
const childTabCompMap:IChildTabCompMap = reactive({})
const selectCompItem = ref<IComponentItem>()
const mainConfig = {
    activeLaunchId: 0,
    launchList: [
        {
            sort: 1,
            scopeType: '1',
            scopeId: '123',
            activeTabId: '11',
            componentDetailList: [
                {
                    id: '11',
                    sort: 1,
                    bizInfo: '火龙果',
                },
                {
                    id: '22',
                    sort: 2,
                    bizInfo: '苹果',
                }
            ]
        },
        {
            sort: 1,
            bizInfo: '123'
        }
    ]
}

// const childTabItem = computed({
//     get() {
//         if (!formData.value || !formData.value.mainConfig) return undefined
//         const lacunchIdx = formData.value.mainConfig.activeLaunchId
//         const activeTabId = formData.value.mainConfig.launchList[lacunchIdx].activeTabId
//         const componentDetailList = formData.value.mainConfig.launchList[lacunchIdx].componentDetailList
//         return  componentDetailList.filter(item => item.id === activeTabId)[0]
//     },
//     set() {

//     }
// })
const activeTabId = computed(() => {
    if (!formData.value || !formData.value.mainConfig) return undefined
    const lacunchIdx = formData.value.mainConfig.activeLaunchId
    const activeTabId = formData.value.mainConfig.launchList[lacunchIdx].activeTabId
    return  activeTabId
})
const changeComponent2 = (item: IComponentItem) => {
    // selectCompItem.value = item
    let { formData, ...rest } = item
    if (item.type === 'xm-tabs') {
        formData = {
            ...formData,
            mainConfig: mainConfig
        }
    }
    // 如果当前是在子tab下选择组件的话
    if (activeTabId.value) {
        if (childTabCompMap[activeTabId.value]) {
            childTabCompMap[activeTabId.value].push({
                ...rest,
                formData
            })
        } else {
            childTabCompMap[activeTabId.value] = [{
                ...rest,
                formData
            }]
        }
    } else {
        componentData.push({
            ...rest,
            formData
        })
    }
}
const chooseComp = (e) => {
    console.log('chooseComp==', e)
    selectCompItem.value = e
}
const formData = computed(() => {
  return selectCompItem.value?.formData
})
// const formData = computed(() => {

// })

provide('childTabCompMap', childTabCompMap)


</script>
<template>
    <h2>编辑区</h2>
    <div class="edit-warpper">
        <ComponentList class="" @changeComponents2="changeComponent2"></ComponentList>
        <PreviewList class="component-list-box" :testName="testName" :formData="formData" :componentData="componentData" @chooseComp="chooseComp"></PreviewList>
        <Config v-model:testName="testName" :formData="formData"></Config>
    </div>
</template>
<style>
.edit-warpper {
    display: flex;
    justify-content: center;
}
.component-list-box {
    width: 500px;
    margin:0 50px;
}
</style>